<template>
	<view class="text-swiper-box">
		<swiper class="text-swiper" vertical circular autoplay :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in noticeList" :key="index" @click="clickItem">
				<view class="t-swiper-item">
					<image class="log-icon" src="../../static/home/notice.png">
					</image>
					<text class="n-title">{{item.title}}</text>
					<text class="n-con">{{item.text}}</text>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const noticeList = ref([{
			title: '公告1',
			text: '公告内容1'
		},
		{
			title: '公告2',
			text: '公告内容2'
		},
		{
			title: '公告3',
			text: '公告内容33公告内容33公告内容33公告内容33公告内容33公告内容33'
		},
	])

	const clickItem = (item) => {
		uni.showToast({
			title: '暂未开放',
			icon: 'none'
		});
	}
</script>

<style lang="scss" scoped>
	.text-swiper-box {
		width: 100%;
	}

	.text-swiper {
		height: 31px;

		.t-swiper-item {
			height: 31px;
			line-height: 31px;
			padding: 0 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.log-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.n-title {
				font-size: 28rpx;
			}

			.n-con {
				font-size: 24rpx;
				color: #777;
				flex: 1;
				padding: 0 28rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>